<template>
	<div>
		<div class="el_header">
			<img src="./img_gold/icon_main.png" />
			<a> 首页 </a> >
			<a> 个人中心 </a> >
			<a> 我的邀请 </a>

			<a class="a_return">
				< 返回 </a> </div> <!-- 主体内容 -->
					<div class="el_main">

						<el-row>
							<el-col :span="23">
								<div class="div_main_bottom">
									<p>我的邀请</p>

									<el-table :data="tableData" stripe border class="el_table">
										<el-table-column label="时间" prop="theTime"></el-table-column>
										<el-table-column label="姓名" prop="name"></el-table-column>
										<el-table-column label="手机号" prop="phone"></el-table-column>
										<el-table-column label="获得金币" prop="golds"></el-table-column>
									</el-table>
									
									<div class="div_ewm">
										<p>我的邀请码</p>
										<img src="./img_gold/myWx.png" class="img_myWx"/> 
										<img src="./img_gold/扫一扫.png" class="img_sys"/> 
										<span>扫一扫 加好友</span>
									</div>
									
									
									<el-pagination
										background
										prev-text="上一页"
										next-text="下一页"
										layout="prev, pager, next"
										:total="500"
										class="the_page">
									</el-pagination>

								</div>
							</el-col>
						</el-row>

					</div>


		</div>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [{
						theTime: "2019-04-08",
						name: "朱恬",
						phone: "15873778378",
						golds: "999999"
					},
					{
						theTime: "2019-04-08",
						name: "朱恬",
						phone: "15873778378",
						golds: "999999"
					},
					{
						theTime: "2019-04-08",
						name: "朱恬",
						phone: "15873778378",
						golds: "999999"
					},
					{
						theTime: "2019-04-08",
						name: "朱恬",
						phone: "15873778378",
						golds: "999999"
					},
					{
						theTime: "2019-04-08",
						name: "朱恬",
						phone: "15873778378",
						golds: "999999"
					},
				]
			}
		}
	}
</script>

<style scoped="scoped">
	span,
	label,
	a {
		line-height: 0;
	}

	/* 顶部导航下面像 面包屑一样的东西 */
	.el_header {
		font-size: 0.0875rem;
		line-height: 0.1875rem;
		padding-left: 0.4rem;
		margin-bottom: 0.0625rem;
		width: 94%;
		position: absolute;
		left: 0;
		top: 0.5625rem;
	}

	.el_header>img {
		vertical-align: middle;
	}

	.el_header a {
		font-size: 0.0875rem;
	}

	.el_header .a_return {
		color: #0070C9;
		float: right;
		margin-top: 0.09375rem;
	}


	/* 主体部分 */
	.el_main {
		overflow: hidden;
		margin-top: 0.28125rem;
		margin-left: 0.125rem;
	}


	/* 主体内容的下半部分 */
	.div_main_bottom {
		margin-top: 0.0625rem;
		padding: 0.175rem 0.1875rem 0 0.1875rem;
		background: url(./img_gold/main-bottom.png);
		background-size: 100% 100%;
		height: 4.375rem;
		width: 6.9375rem;
	}

	.div_main_bottom>p,.div_ewm>p{
		font-size: 0.1rem;
		font-weight: bold;
		line-height: 0.0625rem;
	}

	/* 表格 */
	.el_table {
		width: 5.625rem;
		float: left;
	}
	
	.div_ewm{
		width: 1.25rem;
		height: 1.625rem;
		float: right;
		background: url(img_gold/card_bj.png);
		background-size: 100% 100%;
		position: relative;
		line-height: 0;
	}
	
	.div_ewm>p{
		position: absolute;
		top: -0.28125rem;
	}
	
	.img_myWx{
		margin: auto;
		width: 0.9375rem;
		display: block;
		margin-top: 0.125rem;
	}
	
	.img_sys{
		margin: auto;
		width: 0.15625rem;
		display: block;
		margin-bottom: 0.125rem;
		margin-top: 0.125rem;
	}
	
	.div_ewm>span{
		margin-left: 0.375rem;
		font-size: 0.0875rem;
		color: #fff;
		display: block;
	}
	
	.the_page{
		margin-top: 0.125rem;
		margin-bottom: 0;
		height: 0.1875rem;
		float: left;
	}
</style>
